<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link rel="stylesheet" href="S.css" />
</head>
<body>
	<div class="s-slider x" id="s1">
		<div class="s-slider-range" id="r1"></div>
		<div class="s-slider-bar"  id="x1"></div>	
	</div>
	
	<br>
	<br>
	
	<div class="s-slider y" id="s2">
		<div class="s-slider-range" id="r2"></div>
		<div class="s-slider-bar"  id="x2"></div>	
	</div>
	
</body>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="S.js"></script>
<script type="text/javascript">
	new S.Slider({
		axis:'x',
		el:S.E('s1'),
		val:50,
		change:function(val){
			console.log(val);
		}
	});
	new S.Slider({
		axis:'y',
		el:S.E('s2'),
		val:30,
		drop:function(val){
			console.log(val);
		}
	});
</script>
</html>